import React from 'react'
import { withRouter, Route } from 'react-router-dom'
import Home from '../pages/home'
import Singer from '../pages/singer'
import Rank from '../pages/rank'
import Search from '../pages/search'
import { TabBar } from 'antd-mobile';

class TabBarExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'Home',
            hidden: false,
            fullScreen: true,
        };
    }
    render() {
        return (
            <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="yellow"
                    barTintColor="black"
                    hidden={this.state.hidden}
                >
                    <TabBar.Item
                        title="推荐"
                        key="Home"
                        icon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: ' url(' + require('../assets/icons/推荐0.png') + ') center center /  21px 21px no-repeat'
                        }}
                        />
                        }
                        selectedIcon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: ' url(' + require('../assets/icons/推荐.png') + ') center center /  21px 21px no-repeat'
                        }}
                        />
                        }
                        selected={this.state.selectedTab === 'Home'}
                        badge={1}
                        onPress={() => {
                            this.props.history.push("/home")
                            this.setState({
                                selectedTab: 'Home',
                            });
                        }}
                        data-seed="logId"
                    >
                        <Route path="/home" component={Home} />
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: ' url(' + require('../assets/icons/歌手0.png') + ') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: ' url(' + require('../assets/icons/歌手.png') + ') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        title="歌手"
                        key="singer"
                        badge={''}
                        selected={this.state.selectedTab === 'Singer'}
                        onPress={() => {
                            this.props.history.push('/singer')
                            this.setState({
                                selectedTab: 'Singer',
                            });
                        }}
                        data-seed="logId1"
                    >
                        <Route path="/singer" component={Singer} />
                    </TabBar.Item>
                    <TabBar.Item
                        icon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: ' url(' + require('../assets/icons/排行榜0.png') + ') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: ' url(' + require('../assets/icons/排行.png') + ') center center /  21px 21px no-repeat'
                            }}
                            />
                        }
                        title="排行"
                        key="Rank"
                        dot
                        selected={this.state.selectedTab === 'Rank'}
                        onPress={() => {
                            this.props.history.push('/rank')
                            this.setState({
                                selectedTab: 'Rank',
                            });
                        }}
                    >
                        <Route path="/rank" component={Rank}></Route>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: ' url(' + require('../assets/icons/搜索0.png') + ') center center /  21px 21px no-repeat'
                        }}
                        />
                        }
                        selectedIcon={
                            <div style={{
                                width: '22px',
                                height: '22px',
                                background: 'url(' + require('../assets/icons/搜索.png') + ') center center /  21px 21px no-repeat'
                            }}
                            />}
                        title="搜索"
                        key="Search"
                        selected={this.state.selectedTab === 'Search'}
                        onPress={() => {
                            this.props.history.push('/search')
                            this.setState({
                                selectedTab: 'Search',
                            });
                        }}
                    >
                        <Route path="/search" component={Search} />
                    </TabBar.Item>
                </TabBar>
            </div>
        );
    }
}
export default withRouter(TabBarExample)